<template>
  <view class="ikz-orderdetail">
    <view class="ikz-tips">
      <view class="ikz-tips-title"> 抢单 </view>
      <!-- <view class="ikz-orderdetail-tips-desc">
        订单超过一小时将自动取消
      </view> -->
    </view>
    <view class="ikz-orderdetail-top">
      <view class="ikz-orderdetail-top-code">
        <view class="ikz-orderdetail-top-num">
          订单编号：{{ showData.order_no }}
        </view>
        <view class="ikz-orderdetail-top-status"> 抢单 </view>
      </view>
      <view class="ikz-orderdetail-list-item">
        <view class="ikz-orderdetail-list-top">
          <view class="ikz-orderdetail-list-head">
            <image
              class="ikz-orderdetail-list-img"
              :src="showData.avatar"
            ></image>
          </view>
          <view class="ikz-orderdetail-list-head-right">
            <view class="ikz-orderdetail-list-head-right-box">
              <view class="ikz-orderdetail-list-head-name">
                {{ showData.nickname }}
              </view>
              <view class="ikz-orderdetail-list-head-time">
                {{ showData.createtime }}
              </view>
            </view>
            <view class="ikz-orderdetail-list-head-right-box">
              <view class="ikz-orderdetail-list-head-card">
                {{ showData.type_text }}
              </view>
              <view style="font-size: 30rpx">
                <!-- 订单金额 <text style="color: #FF5722;">￥{{showData.price}}</text> -->
              </view>
              <view v-if="receiver == 1" style="font-size: 30rpx">
                预估收益<text class="ikz-orderdetail-list-head-price"
                  >￥{{ showData.total_fee }}</text
                >
              </view>
            </view>
          </view>
        </view>
        <view class="ikz-orderdetail-list-content">
          {{ showData.information }}
        </view>
      </view>
    </view>

    <view class="ikz-orderdetail-other">
      <view class="ikz-orderdetail-other-title" v-if="showData.receive_limit">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot2"></view>
          <view class="ikz-orderdetail-other-top-title"> 抢单限制 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.receive_limit }}
        </view>
      </view>
      <view class="ikz-orderdetail-other-title" v-if="showData.game_time">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot1"></view>
          <view class="ikz-orderdetail-other-top-title"> 游戏时间 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.game_time }}
        </view>
      </view>
      <view class="ikz-orderdetail-other-title" v-if="showData.game_platform">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot"></view>
          <view class="ikz-orderdetail-other-top-title"> 游戏名称 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.game_platform }}
        </view>
      </view>

      <view class="ikz-orderdetail-other-title" v-if="showData.start">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot"></view>
          <view class="ikz-orderdetail-other-top-title"> 取货地址 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.start }}
        </view>
      </view>
      <view class="ikz-orderdetail-other-title" v-if="showData.destination">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot1"></view>
          <view class="ikz-orderdetail-other-top-title"> 收货地址 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.destination }}
        </view>
      </view>

      <view class="ikz-orderdetail-other-title" v-if="showData.lease_duration">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot2"></view>
          <view class="ikz-orderdetail-other-top-title"> 租借时长 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.lease_duration }}
        </view>
      </view>
      <view class="ikz-orderdetail-other-title" v-if="showData.hope_arrive">
        <view class="ikz-orderdetail-other-top">
          <view class="ikz-sticky-spot1"></view>
          <view
            class="ikz-orderdetail-other-top-title"
            v-if="showData.type == 4"
          >
            预计交付时间
          </view>
          <view class="ikz-orderdetail-other-top-title" v-else> 预计送达时间 </view>
        </view>
        <view class="ikz-orderdetail-other-content">
          {{ showData.hope_arrive }}
        </view>
      </view>
    </view>
    <view class="ikz-orderdetail-tips" v-if="showData.remarks">
      <view class="ikz-orderdetail-tips-item">
        <view class="ikz-orderdetail-tips-help">
          <view class="ikz-orderdetail-tips-help-title"> 备注信息 </view>
          <view class="ikz-orderdetail-tips-help-content">
            {{ showData.remarks }}
          </view>
        </view>
      </view>
    </view>
    <view
      class="ikz-orderdetail-tips"
      v-if="
        showData.annex_information_images &&
        showData.annex_information_images.length
      "
    >
      <view class="ikz-orderdetail-tips-item">
        <view class="ikz-orderdetail-tips-help">
          <view class="ikz-orderdetail-tips-help-title"> 附件信息 </view>
          <view class="ikz-updata-bottom">
            <view
              class="ikz-updata-add"
              v-for="(item, index) in showData.annex_information_images"
              :key="index"
            >
              <image
                class="ikz-updata-img"
                mode="aspectFill"
                @click="showPic(showData.annex_information_images, item)"
                :src="item"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="ikz-bottom" @click="orderReceiving(showData.id)">
      <view class="ikz-help-btn">抢单</view>
    </view>
  </view>
</template>

<script>
var app = getApp();
import ikz from "@/pages/Common/tools";
export default {
  name: "orderdetail",
  components: {},
  props: {
    showData: {
      type: Object,
    },
    cssData: {
      type: Object,
    },
    receiver: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    showPic(urls, current) {
      wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls, // 需要预览的图片http链接列表
      });
    },

    orderReceiving(id) {
      
      if (!uni.getStorageSync("local_user_session")) {
        uni.navigateTo({
          url: "/pages/login/index",
        });
        return;
      }
      //跳转申请抢单员
      var path = "/xyb/user/auth";
      var data = {};
      ikz.post(path, data, (res) => {
		console.log(res.data.data.run_apply_status);
        if (res.data.code) {
          //-1已驳回，0未审核，1已通过，2未申请
          if (res.data.data.run_apply_status > 0) {
            uni.navigateTo({
              url:
                "/pages/Component/Module/Receiver/Program/order/detail/index?id=" +
                id,
            });
          } else if (res.data.data.run_apply_status == 0) {
            uni.showModal({
              title: "提示",
              content: "已申请，审核中",
            });
          } else if (res.data.data.run_apply_status == -1) {
            uni.navigateTo({
              url: "/pages/Component/Module/Receiver/Program/apply/applyfail/index",
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "您还不是抢单员",
              confirmText: "去申请",
              success: function (res) {
                if (res.confirm) {
                  uni.navigateTo({
                    url: "/pages/Component/Module/Receiver/Program/apply/index/index",
                  });
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              },
            });
          }
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ikz-tips {
  box-sizing: border-box;
  width: 90%;
  margin: 30rpx auto;
  border-radius: 15rpx;
}

.ikz-tips-title {
  color: #fff;
}

.ikz-orderdetail-tips-desc {
  font-size: 25rpx;
  color: #fff;
  margin-top: 10rpx;
}

.ikz-orderdetail {
  width: 100%;
  height: 100%;
}

.ikz-orderdetail-top {
  box-sizing: border-box;
  width: 95%;
  background: #fff;
  margin: 30rpx auto;
  border-radius: 15rpx;
}

.ikz-orderdetail-top-code {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.ikz-orderdetail-top-num {
  box-sizing: border-box;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #888;
}

.ikz-orderdetail-top-status {
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  background: linear-gradient(to right, #F44336, #fbab7e);
  color: #fff;
  font-size: 28rpx;
  border-top-right-radius: 15rpx;
  border-bottom-left-radius: 15rpx;
}

.ikz-orderdetail-list-item {
  box-sizing: border-box;
  padding: 30rpx;
  border-radius: 15rpx;
}

.ikz-orderdetail-list-top {
  display: flex;
  align-items: center;
}

.ikz-orderdetail-list-img {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.ikz-orderdetail-list-head-right {
  margin-left: 20rpx;
  width: 85%;
}

.ikz-orderdetail-list-head-right-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 50rpx;
}

.ikz-orderdetail-list-head-time {
  color: #888;
  font-size: 25rpx;
}

.ikz-orderdetail-list-head-card {
  background-color: #F44336;
  color: #fff;
  font-size: 23rpx;
  border-radius: 15rpx;
  padding: 0px 10rpx;
  text-align: center;
  line-height: 45rpx;
}

.ikz-orderdetail-list-head-price {
  color: #F44336;
}

.ikz-orderdetail-list-content {
  line-height: 45rpx;
  font-size: 30rpx;
  margin: 15rpx 0;
}

.ikz-orderdetail-list-head-name {
  font-size: 28rpx;
}

/* dibu*/
.ikz-orderdetail-other {
  box-sizing: border-box;
  width: 95%;
  background: #fff;
  margin: 30rpx auto;
  border-radius: 15rpx;
}

.ikz-orderdetail-other-top {
  display: flex;
  align-items: center;
}

.ikz-orderdetail-other-img {
  width: 50rpx;
  height: 50rpx;
  margin-right: 15rpx;
}

.ikz-orderdetail-other-title {
  box-sizing: border-box;
  padding: 20rpx;
  line-height: 60rpx;
}

.ikz-orderdetail-other-top-title {
  color: #888;
  font-size: 28rpx;
}

.ikz-orderdetail-other-content {
  margin-left: 65rpx;
}

.ikz-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

.ikz-help-btn {
  position: relative;
  width: 80%;
  background: #42d5be;
  border-radius: 50rpx;
  color: #fff;
  text-align: center;
  line-height: 100rpx;
  height: 100rpx;
}

.ikz-sticky-spot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #76a8fd;
  margin-right: 20rpx;
}

.ikz-sticky-spot1 {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #ff8800;
  margin-right: 20rpx;
}

.ikz-sticky-spot2 {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #009423;
  margin-right: 20rpx;
}

.ikz-orderdetail-tips {
  box-sizing: border-box;
  padding: 10rpx 40rpx;
  width: 95%;
  background: #fff;
  margin: 10px auto;
  border-radius: 15rpx;
}

.ikz-orderdetail-tips-item {
  padding: 20rpx 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ikz-orderdetail-tips-item:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #d9d9d9;
  color: #d9d9d9;
  left: 0px;
}

.ikz-orderdetail-tips-item:first-child:before {
  display: none;
}

.ikz-orderdetail-tips-help-title {
  line-height: 60rpx;
}

.ikz-orderdetail-tips-help-content {
  line-height: 50rpx;
  color: #828282;
}

.ikz-updata-img {
  width: 150rpx;
  height: 150rpx;
}

.ikz-updata-add {
  position: relative;
  margin-left: 10rpx;
}

.ikz-updata-img {
  width: 150rpx;
  height: 150rpx;
}

.ikz-updata-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20rpx;
}
</style>
